<template>
  <view class="info">
    <view class="unit">
      <view class="unit-left">
        <uni-icons type="phone-filled" size="20" color="#5E8AF1" />
        <span>{{userInfo.phone}}</span>
      </view>
      <!-- <uni-icons type="arrowright" size="16" color="#b7c5dd"></uni-icons> -->
    </view>
    <view class="hr"></view>
    <view class="unit" @tap="toCompany">
      <view class="unit-left">
        <uni-icons type="smallcircle" size="20" color="#5E8AF1" />
        <span>{{userInfo.jobType}}</span>
      </view>
      <!-- <uni-icons type="arrowright" size="16" color="#b7c5dd"></uni-icons> -->
    </view>
  </view>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  data() {
    return {}
  },
  computed: {
    ...mapGetters('user', {
      userInfo: 'getuserinfo'
    })
  },
  methods: {
    toPhone() {
      uni.navigateTo({
        url: '/pages/common/phone'
      });
    },
    toCompany() {
      uni.navigateTo({
        url: '/pages/common/company'
      });
    },
  }
}
</script>
<style lang="scss" scoped>
.info {
  background: #f2f2f2;
  min-height: 100vh;
  padding: 10px 3vw;
}
.hr {
  height: 10px;
  width: 100%;
}
.unit {
  box-shadow: 0 0 3px 3px #eceaea;
  border-radius: 4px;
  background: #fff;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  &-hr {
    height: 1px;
    background: #f2f2f2;
  }
  &-left {
    display: flex;
    align-items: center;
    span {
      padding: 0 10px;
      color: #808080;
    }
  }
}
</style>